<template>
  <div class="login-container">
    <el-container style="padding:30px;">
      <el-header>
        <el-row>
          <el-col :span="3">
            <img src="/imgs/login/logo.png" style="height: 50px;">
          </el-col>
          <el-col :span="1">
            <img src="/imgs/login/auto.png" style="height: 50px;">
          </el-col>
          <el-col :span="1">
            <img src="/imgs/login/verticalLine.png" style="height: 50px;">
          </el-col>
          <el-col :span="19">
            <span class="system-title">智慧旅游管家</span>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <div class="form-container">
          <el-card class="login-card">
            <h3 class="login-title">用户登录</h3>
            <el-form label-position="top">
              <el-form-item label="用户名">
                <el-input
                    placeholder="请输入用户名"
                    v-model="user.username"
                    clearable>
                </el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input
                    placeholder="请输入密码"
                    v-model="user.password"
                    show-password
                    clearable>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                    type="primary"
                    class="login-btn"
                    @click="login">
                  登录
                </el-button>
              </el-form-item>
            </el-form>
            <div class="tip-text">
              (体验账号: super 密码: 123456)
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();


//1.定义对象用来收集登录表单的数据
const user = ref({username:'',password:''});
//2.定义登录方法
const login = ()=>{
  console.log(user.value);
  //3.利用axios给后端发送登录请求
  axios.post(BASE_URL+'/v1/user/login',user.value)
      .then((response)=>{
        //.then()调用回调函数,在服务器响应后才执行此处代码
        //response是响应对象,我们可以通过response.data得到服务器的响应数据
        console.log(response.data);
        //根据后端JsonResult中的状态码code判断后续应该进行什么操作
        /* response.data是后端响应的JsonResult
        * response.data.data是JsonResult的data值,如:userVO */
        if(response.data.code == 2000){
          //2000-成功-提示成功-跳转用户管理页
          ElMessage.success('登录成功!');
          //console.log(response.data.data);
          //console.log(JSON.stringify(response.data.data));
          router.push('/');
          /* localStorage存储的是字符串类型的键值对 */
          //登录成功后,将后端返回的userVO存入localStorage中,取的时候也用user这个名字取
          localStorage.setItem('user',JSON.stringify(response.data.data));
        }else{
          //其他-提示失败-清空表单
          ElMessage.error(response.data.msg);
          user.value = {username:'',password:''};
        }
      })
}
</script>

<style scoped>
.login-container {
  height: 100vh;
  overflow: hidden;
  background-image: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.system-title {
  color: #fff;
  font-weight: bold;
  font-size: 30px;
  letter-spacing: 2px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
}

.login-card {
  width: 400px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}

.login-card:hover {
  transform: translateY(-5px);
}

.login-title {
  text-align: center;
  color: #409EFF;
  margin-bottom: 30px;
  font-size: 24px;
}

.login-btn {
  width: 100%;
  height: 45px;
  font-size: 16px;
  letter-spacing: 2px;
}

.tip-text {
  text-align: center;
  color: #909399;
  font-size: 14px;
  padding: 15px 0;
  border-top: 1px solid #eee;
  margin-top: 20px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .login-card {
    width: 90%;
    margin: 0 auto;
  }

  .system-title {
    font-size: 24px;
  }
}
</style>